<template>
    <PlayGround v-if="$store.state.pk.status === 'playing'"/>
    <MatchComponent v-if="$store.state.pk.status === 'matching'"/>
    <ResultBoard v-if="$store.state.pk.loser != 'none'"/>
    <div class="user-color" v-if="$store.state.pk.status === 'playing' && parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">左下角</div>
    <div class="user-color" v-if="$store.state.pk.status === 'playing' && parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">右上角</div>
</template>

<script>
import PlayGround from '../../components/PlayGround.vue'
import MatchComponent from '../../components/MatchComponent.vue'
import ResultBoard from '../../components/ResultBoard.vue'
import { onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';

export default {
    components: {
        PlayGround,
        MatchComponent,
        ResultBoard
    },
    setup() {
        const store = useStore();
        const socketUrl = `ws://127.0.0.1:8999/websocket/${store.state.user.token}/`;
        let socket = null;

        onMounted(() => {
            
            store.commit("updateLoser", "none");
            store.commit("updateIsRecord", false);
            store.commit("updateOpponent", {
                username: "我的对手",
                photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
            })

            socket = new WebSocket(socketUrl);

            socket.onopen = () => {
                console.log("open");
                store.commit('updateSocket', socket);
            }

            socket.onmessage = msg => {
                const data = JSON.parse(msg.data);
                if(data.event === 'start-matching') {
                    store.commit("updateOpponent", {
                        username: data.opponent_username,
                        photo: data.opponent_photo,
                    });
                    setTimeout(() => {
                        store.commit('updateStatus', 'playing')
                    }, 800);
                    store.commit('updateGame', data.game);
                }else if(data.event === 'move') {
                    const game = store.state.pk.gameObject;

                    if(!game) {
                        console.error("Game object or snakes not found", game); // 添加日志
                        return;
                    }

                    if(!game.snakes) {
                        console.error("snakes not found", game); // 添加日志
                        return;
                    }

                    const [snake0, snake1] = game.snakes;
                    if (snake0 && snake1) {
                        snake0.set_direction(data.a_direction);
                        snake1.set_direction(data.b_direction);
                    } else {
                        console.error("Snakes are not defined", snake0, snake1); // 添加日志
                    }
                }else if(data.event === 'result') {
                    const game = store.state.pk.gameObject;
                    const [snake0, snake1] = game.snakes;
                    if(data.loser === 'all' || data.loser === 'A') {
                        snake0.status = 'die';
                    }
                    if(data.loser === 'all' || data.loser === 'B') {
                        snake1.status = 'die';
                    }
                    store.commit('updateLoser', data.loser);
                }
            }

            socket.onclose = () => {
                console.log("close");
            }
        });

        onUnmounted(() => {
            socket.close();
            store.commit('updateStatus', 'matching')
        });
    },
    
}


</script>

<style scoped>
div.user-color {
    text-align: center;
    color: black;
    font-size: 30px;
    font-weight: 600;
}
</style>